<template>
  <div>
    <!-- 这是首页主页
      静态组件 （ 分类组件）
      商铺组件
      容器组件（是其他组件，非home私有） -->
    <div class="wrapper">
      <StaticPart />
      <NearBy :goodsData="goodsData"  @go="handler"/>
    </div>
    <Docker />
  </div>
</template>

<!-- <script>
export dafault{

}
</script> -->


<script setup>

import { Toast } from 'vant';
import StaticPart from "./components/StaticPart.vue";
import NearBy from "./components/NearBy.vue";
import Docker from "../../components/Docker.vue";
import { ref, reactive } from "vue";
import { get } from '../../utils/request'
let params = reactive({ project_id: 244, page: 1, limit: 10 })
let goodsData = ref([])

//请求商品列表接口
const getDatas = async () => {
  Toast.loading({
    message: '加载中...',
    forbidClick: true,
  });
  let res = await get('/goods', params)
  goodsData.value = goodsData.value.concat(res.result.rows);
};
getDatas();

const handler = () => {
  //请求更多的数据
  //   触底一次触发一次handler page++ =>发请求
  params.page++
  getDatas()
}
</script>

<style lang="scss" scoped>
.wrapper {
  // overflow-y: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0.5rem;
  right: 0;
//   padding: 0 0.1rem 0.1rem 0.1rem;
  // background-color: skyblue;
//   margin-bottom: 49px;
}
</style>
